<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ueditor编辑器</title>
  <link href="css/editor-style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
</head>
<body>
<textarea rows="20" cols="100" style="position: absolute;left:10px;top:100px;display: inline-block">
			<div class="zmlz-con whbest">
				<p class="taohua"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/taoshu.png"/></p>
				<div class="btn">
					<a href="http://linzhilvyou.51hidaoyou.com/sp_detail.html" class="btn-a1"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/btn1.png"/></a>
					<a href="" class="btn-a2"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/btn2.png"/></a>
					<a href="http://linzhilvyou.51hidaoyou.com/smmz_total.html" class="btn-a3"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/btn3.png"/></a>
					<a href="http://linzhilvyou.51hidaoyou.com/lzbty.html" class="btn-a4"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/btn4.png"/></a>
					<a href="http://linzhilvyou.51hidaoyou.com/xqzb_total.html" class="btn-a5"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/btn5.png"/></a>
					<a href="http://linzhilvyou.51hidaoyou.com/ssmj.html" class="btn-a6"><img src="http://linzhilvyou.51hidaoyou.com/images/zmlz/btn6.png"/></a>
				</div>
			</div>
	    </textarea>
<div class="editor-bottom">
  <div class="buttons">
    <button id="btn-preview">预览</button>
  </div>
</div>
<div class="preview-layer">
  <div class="preview-bg"></div>
  <div class="preview-phone">
    <iframe id="preview-html" name="preview-html" src="preview-h5.html"></iframe>
  </div>
</div>

</body>
<script>
  var css_str = {};
  var pre_phone = $(".preview-phone");
  var pos_left = 0;
  var pos_top = 0;

  $(function(){
    var pre_layer = $(".preview-layer");
    var pre_bg = $(".preview-bg");
    $("#btn-preview").click(function(){
      updatePreviewHtml();
      pre_layer.show();
      resetPrePhoneCss();
    })
    pre_bg.on("click",function(){
      pre_layer.hide();
    });

  })
  function updatePreviewHtml(){
    var ifr_document = document.getElementById("preview-html").contentWindow.document;
    //设置正文
    if(ifr_document){
      var content_str = $("textarea").val();;
      var ifr_content = $(ifr_document).find(".article-content");
      console.log(content_str)
      ifr_content.html(content_str);
    }
  }

  //重置预览手机页面的CSS
  function resetPrePhoneCss(){
    pos_left = $(window).width() / 2 - pre_phone.width() / 2;
    pos_top = $(window).height() / 2 - pre_phone.height() / 2;
    css_str = {
      left:pos_left + "px",
      top:pos_top + "px"
    }
    pre_phone.css(css_str);
  }

  $(window).resize(resetPrePhoneCss);
</script>
</html>
